<eo-message></eo-message>
<div class="!pt-0 p15">
  <div class="top-save-bar">
    <button type="submit" nz-button nztype="primary" class="eo_theme_btn_success" (click)="saveApi()" i18n>Save</button>
  </div>
  <form nz-form [formGroup]="validateForm" [nzLayout]="'vertical'">
    <nz-form-label class="mt-4" nzFor="uri" i18n>API Path</nz-form-label>
    <nz-input-group nzCompact>
      <nz-select [(ngModel)]="model.protocol" formControlName="protocol">
        <nz-option *ngFor="let item of REQUEST_PROTOCOL" [nzLabel]="item.key" [nzValue]="item.value"></nz-option>
      </nz-select>
      <nz-select class="w-[106px]" [(ngModel)]="model.method" formControlName="method">
        <nz-option *ngFor="let item of REQUEST_METHOD" [nzLabel]="item.key" [nzValue]="item.value"></nz-option>
      </nz-select>
      <nz-form-item nz-col class="fg1">
        <nz-form-control i18n-nzErrorTip nzErrorTip="Please enter API Path">
          <input type="text" [(ngModel)]="model.uri" name="uri" id="uri" nz-input formControlName="uri" />
        </nz-form-control>
      </nz-form-item>
    </nz-input-group>
    <nz-form-label nzFor="name" i18n>Group / API Name</nz-form-label>
    <nz-input-group nzCompact>
      <nz-form-item nz-col>
        <nz-form-control class="w_250" i18n-nzErrorTip nzErrorTip="Please select an API group">
          <nz-tree-select
            nzAllowClear="false"
            [nzExpandedKeys]="expandKeys"
            [nzDropdownMatchSelectWidth]="false"
            [nzNodes]="groups"
            [(ngModel)]="model.groupID"
            [nzShowSearch]="true"
            #apiGroup
            formControlName="groupID"
          >
          </nz-tree-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item nz-col class="fg1">
        <nz-form-control
          i18n-nzErrorTip
          nzErrorTip="Please enter API name"
          [nzValidateStatus]="this.validateForm.controls.name"
        >
          <input type="text" [(ngModel)]="model.name" name="name" id="name" nz-input formControlName="name" />
        </nz-form-control>
      </nz-form-item>
    </nz-input-group>
  </form>
  <!-- 请求参数 -->
  <nz-collapse class="eo_collapse mt-2.5" [nzGhost]="true">
    <nz-collapse-panel [nzActive]="true" i18n-nzHeader nzHeader="Request">
      <nz-tabset [nzAnimated]="false" [(nzSelectedIndex)]="nzSelectedIndex">
        <!-- Request Headers -->
        <nz-tab [nzTitle]="headerTitleTmp" [nzForceRender]="true">
          <ng-template #headerTitleTmp>
            <span i18n>Request Headers</span>
            <span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(model.requestHeaders)">{{
              model.requestHeaders | apiParamsNum
            }}</span>
          </ng-template>
          <eo-api-edit-header
            class="eo_theme_iblock bbd bld brd"
            (modelChange)="emitChangeFun()"
            [model]="model.requestHeaders"
          ></eo-api-edit-header>
        </nz-tab>
        <!-- Request Body -->
        <nz-tab [nzTitle]="bodyTitleTmp" [nzForceRender]="true">
          <ng-template #bodyTitleTmp>
            <span i18n>Body</span>
            <nz-badge
            class="ml-1"
              *ngIf="
                ['formData', 'json', 'xml'].includes(model.requestBodyType)
                  ? bindGetApiParamNum(model.requestBody)
                  : model.requestBody?.length
              "
              nzStatus="success"
            ></nz-badge>
          </ng-template>
          <eo-api-edit-body
            class="eo_theme_iblock bbd bld brd"
            [(bodyType)]="model.requestBodyType"
            [(model)]="model.requestBody"
            (modelChange)="emitChangeFun()"
            [supportType]="['formData', 'json', 'xml', 'raw', 'binary']"
            [(jsonRootType)]="model.requestBodyJsonType"
          >
          </eo-api-edit-body>
        </nz-tab>
        <nz-tab [nzTitle]="queryTitleTmp" [nzForceRender]="true">
          <ng-template #queryTitleTmp>
            <span i18n>Query</span>
            <span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(model.queryParams)">{{
              model.queryParams | apiParamsNum
            }}</span>
          </ng-template>
          <eo-api-edit-query
            (modelChange)="emitChangeFun()"
            class="eo_theme_iblock bbd bld brd"
            [model]="model.queryParams"
          ></eo-api-edit-query>
        </nz-tab>
        <nz-tab [nzTitle]="restTitleTmp" [nzForceRender]="true">
          <ng-template #restTitleTmp>
            <span i18n>REST</span>
            <span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(model.restParams)">{{
              model.restParams | apiParamsNum
            }}</span>
          </ng-template>
          <eo-api-edit-rest
            class="eo_theme_iblock bbd bld brd"
            [model]="model.restParams"
            (modelChange)="emitChangeFun()"
          ></eo-api-edit-rest>
        </nz-tab>
      </nz-tabset>
    </nz-collapse-panel>
  </nz-collapse>
  <!-- 响应内容 -->
  <nz-collapse class="eo_collapse mt-2.5" [nzGhost]="true">
    <nz-collapse-panel [nzActive]="true" i18n-nzHeader nzHeader="Response">
      <nz-tabset [nzAnimated]="false" [nzSelectedIndex]="1">
        <nz-tab [nzTitle]="responseHeaderTitleTmp" [nzForceRender]="true">
          <ng-template #responseHeaderTitleTmp>
            <span i18n>Response Headers</span>
            <span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(model.responseHeaders)">{{
              model.responseHeaders | apiParamsNum
            }}</span>
          </ng-template>
          <eo-api-edit-header
            class="eo_theme_iblock bbd bld brd"
            [model]="model.responseHeaders"
            (modelChange)="emitChangeFun()"
          >
          </eo-api-edit-header>
        </nz-tab>
        <nz-tab [nzTitle]="responseTitleTmp" [nzForceRender]="true">
          <ng-template #responseTitleTmp>
            <span i18n>Response</span>
            <nz-badge
            class="ml-1"
            *ngIf="
            ['formData', 'json', 'xml'].includes(model.responseBodyType)
              ? bindGetApiParamNum(model.responseBody)
              : model.responseBody?.length
          "
              nzStatus="success"
            ></nz-badge>
          </ng-template>
          <eo-api-edit-body
            class="eo_theme_iblock bbd bld brd"
            [(bodyType)]="model.responseBodyType"
            [(model)]="model.responseBody"
            (modelChange)="emitChangeFun()"
            [supportType]="['json', 'xml', 'raw', 'binary']"
            [(jsonRootType)]="model.responseBodyJsonType"
          >
          </eo-api-edit-body>
        </nz-tab>
      </nz-tabset>
    </nz-collapse-panel>
  </nz-collapse>
</div>
